* {
  font-family: Courgette, "Comic Sans MS";
  margin: 0;
  padding: 0; }

body {
  color: black;
  font-size: 16pt;
  background-image: url("../images/back.jpg");
  background-repeat: no-repeat; }
  body > #wrapper {
    background-color: rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 0;
    bottom: 0;
    left: 17%;
    right: 17%;
    margin: 2em auto;
    padding: 0.5em; }
    body > #wrapper header > h1 {
      font-size: 20pt;
      background-image: url("../images/logo.png");
      background-repeat: no-repeat;
      background-size: contain;
      color: transparent; }
    body > #wrapper > #innerWrapper {
      min-width: 40em; }
      body > #wrapper > #innerWrapper div#login {
        position: absolute;
        top: calc(50% - 5em);
        left: calc(50% - 5em);
        margin: 0 auto;
        width: 10em; }
        body > #wrapper > #innerWrapper div#login strong {
          position: relative;
          left: -1em;
          bottom: 0.5em; }
        body > #wrapper > #innerWrapper div#login button {
          position: absolute;
          right: -0.5em;
          bottom: -3.5em;
          margin: 1em auto; }
      body > #wrapper > #innerWrapper #notes {
        position: absolute;
        top: 4em;
        bottom: 4em;
        left: 1em;
        right: 1em; }
        body > #wrapper > #innerWrapper #notes .notesList {
          position: absolute;
          left: 0;
          top: 0;
          bottom: 0;
          width: 10em; }
          body > #wrapper > #innerWrapper #notes .notesList .noteInfo {
            transition: all 0.2s linear; }
            body > #wrapper > #innerWrapper #notes .notesList .noteInfo:hover {
              color: #87c900; }
        body > #wrapper > #innerWrapper #notes .noteDetails {
          position: absolute;
          left: 11em;
          top: 0;
          bottom: 0;
          right: 0; }
          body > #wrapper > #innerWrapper #notes .noteDetails div {
            position: absolute;
            top: 0;
            left: 0;
            right: 0; }
            body > #wrapper > #innerWrapper #notes .noteDetails div.controlsWrapper {
              position: absolute;
              top: -2em; }
            body > #wrapper > #innerWrapper #notes .noteDetails div.new button, body > #wrapper > #innerWrapper #notes .noteDetails div.edit button {
              position: absolute;
              right: 0;
              bottom: -3.5em; }
            body > #wrapper > #innerWrapper #notes .noteDetails div label {
              display: block;
              margin-bottom: 0.5em;
              position: relative;
              top: 0;
              left: 0; }
              body > #wrapper > #innerWrapper #notes .noteDetails div label > input[type="text"], body > #wrapper > #innerWrapper #notes .noteDetails div label textarea {
                position: absolute;
                left: 5em;
                width: calc(100% - 5em); }
              body > #wrapper > #innerWrapper #notes .noteDetails div label > textarea {
                display: inline-block;
                height: 3em;
                resize: none; }
    body > #wrapper footer {
      position: absolute;
      bottom: 0; }

.dialogBox {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: transparent; }
  .dialogBox > div {
    opacity: 0.5;
    background-image: url(../images/back.jpg);
    background-size: cover;
    width: calc(66% - 2em);
    min-width: 10em;
    margin: 7em auto;
    padding: 1em; }

input, textarea {
  font-size: 0.8em;
  background-color: rgba(255, 255, 255, 0.1);
  border: none;
  border-bottom: 1px solid black;
  padding: 0.25em; }

button {
  font-size: 0.8em;
  background-color: transparent;
  border: 1px solid black;
  padding: 0.25em;
  color: white; }
